<template>
  <div style="background:#FFFFFF">
    <el-row style="padding:10px">
      <el-button
        type="success"
        plain
        size="small"
        icon="el-icon-refresh-right"
        style="float:left;"
        @click="getPartments()"
      ></el-button>
      <el-button
        type="primary"
        plain
        size="small"
        style="float:left;margin-left:10px"
        @click="addPartment1()"
      >
        <span class="Fontb">添加部门</span>
      </el-button>
    </el-row>
    <el-row>
      <el-table :data="mPartments" v-loading="mTableLoading" border style="width:100%">
        <el-table-column label="编号" prop="partmentId"></el-table-column>
        <el-table-column label="部门名字" prop="name"></el-table-column>

        <el-table-column label="下级科室">
          <template slot-scope="scope">
            <el-button @click="showNextPartment(scope.row)" type="text">
              <span class="Fontb">下属科室</span>
            </el-button>
          </template>
        </el-table-column>

        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button @click="showMdfyDialog(scope.row);mNextRow = undefined;" type="text">
              <span class="Fontb">编辑</span>
            </el-button>
            <el-button @click="mSelectRow=scope.row;mDelDialog=true" type="text">
              <span class="Fontb" style="color:#F56C6C">删除</span>
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>

    <!-- 分页 -->

    <!-- 重要对话框 -->

    <!-- 添加以及部门 -->
    <el-dialog :title="mTitle" :visible.sync="mAddRowDialog" width="30%">
      <el-row>
        <!-- <el-radio v-model="mAddRowForm.addType" label="1">一级部门</el-radio> -->
        <!-- <el-radio v-model="mAddRowForm.addType" label="2">二级部门</el-radio> -->
      </el-row>

      <el-row style="margin-top:20px">
        <el-col :span="6">名字</el-col>
        <el-col :span="18">
          <el-input placeholder="请输入名字" v-model="mAddRowForm.name"></el-input>
        </el-col>
      </el-row>

      <el-row style="margin-top:20px">
        <el-col :span="6">选择审核人</el-col>
        <el-col :span="18">
          <el-select
            v-model="mAddRowForm.reviewUserIds"
            multiple
            placeholder="可不选"
            style="width:100%"
          >
            <el-option
              v-for="item in mReviewers"
              :key="item.userId"
              :label="item.name"
              :value="item.userId"
            ></el-option>
          </el-select>
        </el-col>
      </el-row>

      <!-- <el-row style="margin-top:20px" v-if="mAddRowForm.addType=='2'">
        <el-col :span="6">选择所属部门</el-col>
        <el-col :span="18">
          <el-select v-model="mAddRowForm.upPartmentId" placeholder="请选择">
            <el-option
              v-for="item in mPartments"
              :key="item.partmentId"
              :label="item.name"
              :value="item.partmentId"
            ></el-option>
          </el-select>
        </el-col>
      </el-row>-->

      <el-row style="margin-top:20px">
        <el-col :span="6">是否需要审核</el-col>
        <el-col :span="18">
          <el-radio v-model="mAddRowForm.needCheck" label="1">是</el-radio>
          <el-radio v-model="mAddRowForm.needCheck" label="0">否</el-radio>
        </el-col>
      </el-row>

      <span slot="footer" class="dialog-footer">
        <el-button @click="mAddRowDialog = false">取 消</el-button>

        <el-button v-if="!mMdfyRowDialog" type="primary" @click="addRow()">添 加</el-button>
        <el-button v-if="mMdfyRowDialog" type="primary" @click="mdfyRow()">确认修改</el-button>
      </span>
    </el-dialog>

    <!-- 删除一行信息 -->
    <el-dialog title="确认删除" :visible.sync="mDelDialog" width="30%">
      <div>确认删除 {{mSelectRow.name}}</div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="mDelDialog = false">
          <span class="Fontb">取 消</span>
        </el-button>

        <el-button type="danger" @click="delRow()">
          <span class="Fontb">确认删除</span>
        </el-button>
      </span>
    </el-dialog>

    <!-- 下属科室列表 -->

    <el-dialog :title="mTitle2" :visible.sync="mNextPartmentDialog" width="50%">
      <el-row>
        <el-button type="primary" plain size="small" @click="addPartment2()">添加科室</el-button>
      </el-row>
      <el-table :data="mNextPartment" stripe style="width:100%;margin-top:20px">
        <el-table-column label="部门编号" prop="partmentId"></el-table-column>
        <el-table-column label="部门名字" prop="name"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button @click="showMdfyDialog(scope.row)" type="text">
              <span class="Fontb">编辑</span>
            </el-button>

            <el-button @click="mSelectRow=scope.row;mDelDialog=true" type="text">
              <span class="Fontb" style="color:#F56C6C">删除</span>
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>


<style >
@import "../assets/css/base.css";
</style>



<script>
import {
  getRequestHeader,
  loginApi,
  getThirdCompanyApi,
  updateUserApi,
  addUserApi,
  getAllReviewersApi
} from "../api/user.js";
import {
  getNowFormatDate,
  getWeekToday,
  isBlankApi,
  logxApi
} from "../api/util.js";
import {
  getPartmentsApi,
  addPartmentApi,
  updatePartmentApi,
  delPartmentApi
} from "../api/partment.js";
import { Loading } from "element-ui";
export default {
  data() {
    return {
      mTitle: undefined,
      mTitle2: undefined,
      mDelDialog: false,
      mTableData: [],
      mPartments: [],
      page: 0,
      totalPage: 0,
      pagesize: 15,
      mTableLoading: false,
      mSelectRow: {},
      mCloseDialog: false,
      mMdfyRowDialog: false,
      mAddRowDialog: false,
      mUpPartmentId: 0,
      mAddRowForm: {
        addType: "1"
      },
      mReviewers: [],
      mNextPartmentDialog: false,
      mNextPartment: [],
      mNextRow: undefined
    };
  },
  created() {},
  mounted() {
    this.getPartments();
    this.getReviewers();
  },
  methods: {
    showFullLoading() {
      this.mFullLoading = Loading.service({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
    },
    clsoeFullLoading() {
      if (this.mFullLoading) {
        this.mFullLoading.close();
      }
    },
    getPartments() {
      var that = this;
      that.mTableLoading = true;
      getPartmentsApi(
        that.mUpPartmentId,
        getRequestHeader(),
        new (function() {
          this.success = function(data) {
            that.mPartments = data;
            that.mTableLoading = false;
          };
          this.fail = function(msg) {
            that.mTableLoading = false;
            that.mPartments = [];
          };
        })()
      );
    },
    refreshDrivers(lst) {
      var that = this;
      var result = [];
      lst.forEach(element => {
        if (element.userStatus == "normal") {
          element.strStatus = "正常";
        } else if (element.carStatus == "disable") {
          element.strStatus = "不可用";
        } else {
          element.strStatus = "未知";
        }
        result.push(element);
      });
      // console.log(JSON.stringify(result, null, 2))
      return result;
    },

    addRow() {
      var that = this;
      var row = this.mAddRowForm;
      if (!row || isBlankApi(row.name)) {
        this.$message.error("请填写部门名字");
        return;
      }
      if (row.addType == "1") {
        row.upPartmentId = "0";
      } else if (row.addType == "2") {
        if (isBlankApi(row.upPartmentId)) {
          this.$message.error("请选择上级部门");
          return;
        }
      } else {
        this.$message.error("未知错误");
        return;
      }

      logxApi(row);
      this.showFullLoading();
      addPartmentApi(
        row.upPartmentId,
        row.name,
        row.reviewUserIds,
        row.needCheck,
        getRequestHeader(),
        new (function() {
          this.fail = function(msg) {
            that.clsoeFullLoading();
            that.$message.error(msg);
          };
          this.success = function(data) {
            that.clsoeFullLoading();
            that.$message.success("添加成功");
            that.mAddRowDialog = false;
            that.getPartments();
            if (that.mNextRow) {
              that.showNextPartment(that.mNextRow);
            }
          };
        })()
      );
    },
    getReviewers() {
      var that = this;
      getAllReviewersApi(
        getRequestHeader(),
        new (function() {
          this.fail = function(msg) {};
          this.success = function(data) {
            // logxApi(data)
            that.mReviewers = data;
          };
        })()
      );
    },
    showMdfyDialog(row0) {
      // this.mNextRow = undefined;
      var row = JSON.parse(JSON.stringify(row0));
      logxApi(row);
      this.mTitle = "编辑部门";
      var that = this;
      // this.mAddRowForm.a;
      if (!row.applyRules || row.applyRules == "Review") {
        row.needCheck = "1";
      } else {
        row.needCheck = "0";
      }
      if (row.upPartmentId && row.upPartmentId != "0") {
        row.addType = "2";
      } else {
        row.addType = "1";
      }
      if (row.reviewUserIds) {
        row.reviewUserIds = JSON.parse(row.reviewUserIds);
      }
      this.mAddRowForm = row;
      that.mMdfyRowDialog = true;
      that.mAddRowDialog = true;
      // {addType:'1','needCheck':'1'};
    },
    mdfyRow() {
      var that = this;
      var row = this.mAddRowForm;
      if (!row || isBlankApi(row.name)) {
        this.$message.error("请填写部门名字");
        return;
      }
      if (row.addType == "1") {
        row.upPartmentId = "0";
      } else if (row.addType == "2") {
        if (isBlankApi(row.upPartmentId)) {
          this.$message.error("请选择上级部门");
          return;
        }
      } else {
        this.$message.error("未知错误");
        return;
      }

      logxApi(row);
      this.showFullLoading();
      updatePartmentApi(
        row.upPartmentId,
        row.name,
        row.reviewUserIds,
        row.needCheck,
        row.partmentId,
        getRequestHeader(),
        new (function() {
          this.fail = function(msg) {
            that.clsoeFullLoading();
            that.$message.error(msg);
          };
          this.success = function(data) {
            that.clsoeFullLoading();
            that.$message.success("修改成功");
            that.mAddRowDialog = false;
            that.getPartments();

            if (that.mNextRow) {
              that.showNextPartment(that.mNextRow);
            }
          };
        })()
      );
    },
    showNextPartment(row) {
      var that = this;
      this.mNextRow = row;
      this.mTitle2 = row.name + " 下级科室";
      that.showFullLoading();
      getPartmentsApi(
        row.partmentId,
        getRequestHeader(),
        new (function() {
          this.fail = function(msg) {
            that.clsoeFullLoading();
            that.$message.error(msg);
          };
          this.success = function(data) {
            that.clsoeFullLoading();
            that.mNextPartment = data;
            that.mNextPartmentDialog = true;
          };
        })()
      );
    },
    delRow() {
      var that = this;
      that.showFullLoading();
      var partmentId = this.mSelectRow.partmentId;
      delPartmentApi(
        partmentId,
        getRequestHeader(),
        new (function() {
          this.fail = function(msg) {
            that.clsoeFullLoading();
            that.$message.error(msg);
          };
          this.success = function(data) {
            that.clsoeFullLoading();
            that.mDelDialog = false;
            that.$message.success("删除成功");
            that.getPartments();
            if (that.mNextRow) {
              that.showNextPartment(that.mNextRow);
            }
          };
        })()
      );
    },
    addPartment1() {
      this.mAddRowDialog = true;
      this.mMdfyRowDialog = false;
      this.mTitle = "添加部门";
      this.mAddRowForm = { addType: "1", needCheck: "1" };
      this.upPartmentId = undefined;
    },
    addPartment2() {
      this.mAddRowDialog = true;
      this.mMdfyRowDialog = false;
      this.mTitle = "添加科室";
      this.mAddRowForm = {
        addType: "2",
        needCheck: "1",
        upPartmentId: this.mNextRow.partmentId
      };
      this.upPartmentId = this.mNextRow.partmentId;
    }
    //----------over mroethods------
  }
};
</script>